<!--
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements.  See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership.  The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License.  You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
-->
<div class="panel panel-default mainpage">
  <div class="panel-body">
    <h1>{{'main.title' | translate}}</h1>
    <div ng-if="isLoaded" id="main-operations-boxes" class="row thumbnails">
      <p ng-hide="cluster">{{'main.noClusterDescription' | translate}}</p>
      <p ng-show="cluster">{{'main.hasClusterDescription' | translate}}</p>

        <!--Clusters-->
      <div ng-show="cluster" class="col-sm-11 thumbnail">
        <h4 class="title">{{'main.operateCluster.title' | translate}}</h4>
        <div class="description">{{'main.operateCluster.description' | translate}}</div>
        <div class="glyphicon glyphicon-cloud"></div>
        <div class="buttons">
        <span ng-class="{active: isActive('clusters.manageAccess')}">
          <a ng-show="cluster.Clusters.provisioning_state != 'INSTALLED'" href class="btn btn-primary permission-button" ng-disabled="cluster.Clusters.provisioning_state != 'INSTALLED' ">{{'main.operateCluster.manageRoles' | translate}}</a>
          <a ng-show="cluster.Clusters.provisioning_state == 'INSTALLED'" href="#/clusters/{{cluster.Clusters.cluster_name}}/userAccessList" class="btn btn-primary permission-button" ng-disabled="cluster.Clusters.provisioning_state != 'INSTALLED' ">{{'main.operateCluster.manageRoles' | translate}}</a>
        </span>
        <span>
          <a ng-show="cluster.Clusters.provisioning_state != 'INSTALLED'" href class="btn btn-primary go-dashboard-button" ng-disabled="cluster.Clusters.provisioning_state != 'INSTALLED' ">{{'common.goToDashboard' | translate}}</a>
          <a ng-show="cluster.Clusters.provisioning_state == 'INSTALLED'" href="{{fromSiteRoot('/#/main/dashboard/metrics')}}" class="btn btn-primary go-dashboard-button" ng-disabled="cluster.Clusters.provisioning_state != 'INSTALLED' ">{{'common.goToDashboard' | translate}}</a>
        </span>
        </div>
      </div>
      <div ng-hide="cluster" class="col-sm-11 thumbnail">
        <h4 class="title">{{'main.createCluster.title' | translate}}</h4>
        <div class="description">{{'main.createCluster.description' | translate}}</div>
        <div class="glyphicon glyphicon-cloud"></div>
        <div class="buttons"> <a href="{{fromSiteRoot('/#/installer/step0')}}" class="btn btn-primary create-cluster-button">{{'main.createCluster.launchInstallWizard' | translate}}</a></div>
      </div>

        <!--Manage Users and groups-->
      <div class="col-sm-5 thumbnail">
        <h4 class="title">{{'main.manageUsersAndGroups.title' | translate}}</h4>
        <div class="description">{{'main.manageUsersAndGroups.description' | translate}}</div>
        <div class="glyphicon glyphicon-user"></div>
        <div class="buttons">
          <span ng-class="{active: isActive('users.list')}"><link-to route="users.list" class="btn btn-primary userslist-button">{{'common.users' | translate}}</link-to></span>
          <span ng-class="{active: isActive('groups.list')}"><link-to route="groups.list" class="btn btn-primary groupslist-button">{{'common.groups' | translate}}</link-to></span>
        </div>
      </div>

        <!--Deploy Views-->
      <div class="col-sm-5 thumbnail">
        <h4 class="title">{{'main.deployViews.title' | translate}}</h4>
        <div class="description">{{'main.deployViews.description' | translate}}</div>
        <div class="glyphicon glyphicon-th"></div>
        <div ng-class="{active: isActive('views.list')}" class="buttons"><link-to route="views.list" class="btn btn-primary viewslist-button">{{'common.views' | translate}}</link-to></div>
        </div>
      </div>
  </div>
</div>
